import { Typography } from 'antd';
import { m } from 'framer-motion';
import { Helmet } from 'react-helmet-async';
import { NavLink } from 'react-router-dom';

import Character4 from '@/assets/images/characters/character_4.png';
import MotionContainer from '@/components/animate/motion-container';
import { varBounce } from '@/components/animate/variants/bounce';
import { useThemeToken } from '@/theme/hooks';
import { SvgIcon } from '@/components/icon';

const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env;

type Props = {
  title?: string,
  description?: string,
  link?: string,
  linkText?: string,
  showButton?: boolean,
  fontSize?: string,
  classname?: string,
  onLinkClick?: () => void,
}

export default function EmptyPape({ title, description, link, linkText, showButton, fontSize, classname, onLinkClick }: Props) {
  const {
    colorBgBase,
    colorTextBase,
    colorPrimary,
    colorPrimaryActive,
    colorPrimaryTextActive,
    colorPrimaryHover,
  } = useThemeToken();
  return (
    <>
      {/* <Helmet>
        <title> {title ?? "403 No Permission!"}</title>
      </Helmet> */}

      <div className={`m-auto max-w-[400px] ${classname}`}>
        <MotionContainer className="flex flex-col items-center justify-center px-2">
          {title &&<m.div variants={varBounce().in}>
            <Typography.Title level={3} className="text-center">
              {title ?? "No Permission!"}
            </Typography.Title>
          </m.div>}

          {description && <m.div variants={varBounce().in}>
            <Typography.Paragraph type="secondary" className="text-center">
              {description ?? "你可以创建一个应用"}
            </Typography.Paragraph>
          </m.div>}

          <m.div variants={varBounce().in}>
            <SvgIcon icon="ic_rj_empty" style={{ fontSize: fontSize ?? '400px' }} />
          </m.div>
          {showButton && <NavLink
            to={link ?? ''}
            style={{ background: colorTextBase, color: colorBgBase }}
            className="rounded-md p-4"
            onClick={onLinkClick}
          >
            {linkText ?? "Go To Home"}
          </NavLink>}

        </MotionContainer>
      </div>
    </>
  );
}
